<template>
  <view class="news-card" @click="emit('click')">
    <!-- 置顶标签 -->
    <view class="top-tag" v-if="isTop">置顶</view>
    <!-- 带图新闻 -->
    <view class="card-with-img" v-if="img">
      <image :src="img" class="news-img" />
      <view class="news-info">
        <text class="news-title">{{ title }}</text>
        <text class="news-source">{{ source }} · {{ comment }}评</text>
      </view>
    </view>
    <!-- 无图新闻 -->
    <view class="card-no-img" v-else>
      <text class="news-title">{{ title }}</text>
      <text class="news-source">{{ source }} · {{ comment }}评</text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  id: Number,
  title: String,
  source: String,
  time: String,
  comment: Number,
  isTop: Boolean,
  img: String
});
const emit = defineEmits(['click']);
</script>

<style scoped>
.news-card {
  padding: 15rpx 0;
  border-bottom: 1rpx solid #eee;
}
.top-tag {
  color: #ff3333;
  font-size: 24rpx;
  border: 1rpx solid #ff3333;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  margin-bottom: 5rpx;
}
.card-with-img {
  display: flex;
}
.news-img {
  width: 150rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 10rpx;
}
.news-title {
  font-size: 28rpx;
  line-height: 40rpx;
  margin-bottom: 5rpx;
}
.news-source {
  font-size: 24rpx;
  color: #999;
}
</style>